<template>
<div id="myLineId"  class="lineContainer">
    
</div>
</template>

<script>
import echarts from 'echarts'
export default {
 data(){
      return{
          echart:null
      }
  },
  mounted(){
      this.initEchart()  //首屏渲染
  },
  methods:{
     initEchart(){
                  this.$nextTick(()=>{
                        this.echart = echarts.init(document.getElementById('myLineId'))
                        this.echart.setOption(this.option())
                    })
      },
    option(){
 let option = {
    xAxis: {
        type: 'category',
        name:'日期',
        data: ['03-01', '03-02', '03-03', '03-04', '03-05', '03-06', '03-07','03-08','03-09','03-10'],
          axisTick: {show: false},
    },
        tooltip: {
    trigger: 'axis',
    axisPointer: {
        type: 'cross',
        crossStyle: {
            color: '#999'
        }
    }},
    yAxis: {
        type: 'value',
        max:'30000',
        name:'(元)',
        splitNumber : 10,
        splitLine:{
            show:true,
            lineStyle:{
                type:'dashed'
            }
},
axisTick: {show: false},

    },
    series: [{
        data: [
           {value: 24000,
 itemStyle: {color: new echarts.graphic.LinearGradient(
                        0, 1, 0, 0, [{
                                offset: 0,
                                color: '#fff'
                            }, 
                             {
                                offset: 0.5,
                                color: '#E5C2FD'
                            },
                            {
                                offset: 1,
                                color: '#CC88FE'
                            }
                        ]
                    ),
                }
            },
            {value: 14000,
             itemStyle: {color: new echarts.graphic.LinearGradient(
                        0, 1, 0, 0, [{
                                offset: 0,
                                color: '#fff'
                            }, 
                            {offset: 1,
                            color: '#88D5FE'
                            }
                        ]
                    ),
                }
            },
            {value: 23000,
             itemStyle: {color: new echarts.graphic.LinearGradient(
                        0, 1, 0, 0, [{
                                offset: 0,
                                color: '#fff'
                            }, 
                            {offset: 1,
                            color: '#F5AD78'
                            }
                        ]
                    ),
                }
            }, 
            {value: 28000,
             itemStyle: {color: new echarts.graphic.LinearGradient(
                        0, 1, 0, 0, [{
                                offset: 0,
                                color: '#fff'
                            }, 
                            {offset: 1,
                            color: '#ADE46B'
                            }
                        ]
                    ),
                }
            }, 
            {value: 15000,
            itemStyle: {color: new echarts.graphic.LinearGradient(
                        0, 1, 0, 0, [{
                                offset: 0,
                                color: '#fff'
                            }, 
                            {offset: 1,
                            color: '#ED7A8E'
                            }
                        ]
                    ),
                }
            },
            {value: 20000,
            itemStyle: {color: new echarts.graphic.LinearGradient(
                        0, 1, 0, 0, [{
                                offset: 0,
                                color: '#fff'
                            }, 
                            {offset: 1,
                            color: '#657EED'
                            }
                        ]
                    ),
                }
            }, 
            {value: 15000,
             itemStyle: {color: new echarts.graphic.LinearGradient(
                        0, 1, 0, 0, [{
                                offset: 0,
                                color: '#fff'
                            }, 
                            {offset: 1,
                            color: '#67DDAA'
                            }
                        ]
                    ),
                }
            },
            {value: 29000,
             itemStyle: {color: new echarts.graphic.LinearGradient(
                        0, 1, 0, 0, [{
                                offset: 0,
                                color: '#fff'
                            }, 
                            {offset: 1,
                            color: '#95D7FF'
                            }
                        ]
                    ),
                }
            }, 
            {value: 6000,
            itemStyle: {color: new echarts.graphic.LinearGradient(
                        0, 1, 0, 0, [{
                                offset: 0,
                                color: '#fff'
                            }, 
                            {offset: 1,
                            color: '#F29A8E'
                            }
                        ]
                    ),
                }
            },
            {value: 12000,
            itemStyle: {color: new echarts.graphic.LinearGradient(
                        0, 1, 0, 0, [{
                                offset: 0,
                                color: '#fff'
                            }, 
                            {offset: 1,
                            color: '#74DFAC'
                            }
                        ]
                    ),
                }
            },],
        type: 'bar',
         barWidth : 10,
    
    }]
};
return option
    }
  }
}  
  
</script>

<style lang='less'>
.lineContainer{
    width: 600px;
    height: 450px;
    background: #fff;
}
.el-table th.el-table__cell>.cell{
    text-align: center !important;
}
.el-table td.el-table__cell div{
  text-align: center !important;
}

</style>